<template>
  <el-dialog
    title="角色成员"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
    append-to-body
  >
    <div style="text-align: center">
      <div>
        <el-button type="text" style="color: red" size="mini" @click="clear()"
          ><span class="clearbutton">清空列表</span>
        </el-button>
      </div>
      <el-transfer
        style="text-align: left; display: inline-block"
        v-model="value"
        filterable
        ref="roleTransfer"
        :left-default-checked="[]"
        :right-default-checked="rightlist"
        :render-content="renderFunc"
        :titles="['未选', '已选']"
        :button-texts="['', '']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        @change="handleChange"
        :data="data"
      >
      </el-transfer>
      <div>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getLeftList, getRightList, submitUserRole } from "@/api/role";
export default {
  components: {},
  props: [],
  data() {
    const generateData = (_) => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
        });
      }
      return data;
    };
    return {
      // left-default-checked 左侧默认选中的值
      // right-default-checked 右侧默认选中的值
      //全部数据
      data: [],
      //右侧数据源
      value: [],
      //右侧默认选中数组
      rightlist: [],
      // rightlist暂存区
      rightdata: [],
      renderFunc(h, option) {
        return <span>{option.label}</span>;
      },
      btnLoading: false,
      loading: false,
      dialogVisible: false,
      roleid: undefined,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    init(id) {
      this.roleid = id;
      this.dialogVisible = true;
      //初始化左侧数据和右侧数据
      getLeftList(id).then((res) => {
        this.data = [];

        this.data = res.list;
      });
      getRightList(id).then((res) => {
        this.value = [];
        this.rightlist = [];
        for (var i = 0; i < res.list.length; i++) {
          this.value.push(res.list[i].key);
          this.rightlist.push(res.list[i].key);
          this.rightdata.push(res.list[i].key);
        }
      });
    },
    handleClose(done) {
      done();
    },
    handleChange(value, direction, movedKeys) {
      // console.log(value, direction, movedKeys);
      // console.log("出发事件", direction);
      // console.log("value", value);
      // console.log("移除的值", movedKeys);
      if (direction == "left") {
        //左侧触发
        // if (movedKeys.length > 0) {
        //   for (var i = 0; i < movedKeys.length; i++) {
        //     this.data.push(movedKeys[i]);
        //   }
        // } else {
        //   this.data.push(movedKeys);
        // }
        console.log("left", this.data);
      }
      if (direction == "right") {
        // console.log(this.value);
        // console.log(movedKeys.length);

        if (movedKeys.length > 1) {
          //直接往rightlist中添加数据 默认选中不会触发 之后把数组清空再往里添加才可以
          this.rightlist = [];
          for (var i = 0; i < this.rightdata.length; i++) {
            this.rightlist.push(this.rightdata[i]);
          }
          for (var i = 0; i < movedKeys.length; i++) {
            this.rightlist.push(movedKeys[i]);
          }
        } else if (movedKeys.length == 1) {
          this.rightlist = [];
          for (var i = 0; i < this.rightdata.length; i++) {
            this.rightlist.push(this.rightdata[i]);
          }
          this.rightlist.push(movedKeys[0]);
          this.rightdata.push(movedKeys[0]);
        }
      }
    },
    clear() {
      // console.log("clear");
      //清空选中列表
      this.value = [];
    },
    submit() {
      //数据提交
      // console.log("数据提交");
      // console.log("right", this.value);
      // console.log(this.roleid);
      if (this.value.length > 0) {
        submitUserRole(this.roleid, this.value).then((res) => {
          // console.log("submit");
          if ((res.state = "success")) {
            this.$message({ type: "success", message: res.message });
          }
          this.dialogVisible = false;
        });
      } else {
        //提醒
        this.$message({ type: "error", message: "请选择人员！" });
      }
    },
  },
};
</script>
<style>
.clearbutton {
  padding-left: 250px;
}
</style>